<!-- <div class="auth-container0" style="height:100%;width:100%;background-image: url('../../../assets/1.png');background-size:100% 100%;

background-attachment: fixed;"> -->
<div class="gradient">
    <div class="auth-container">
        <div class="auth-box">
            <h2 *ngIf="authMode === 'Signup'">注册</h2>
            <h2 *ngIf="authMode === 'Login'">登录</h2>
            <form [formGroup]="authForm">
                <!-- Login or Signup inputs -->
                <div class="form-group">
                    <label for="username" style="float: left;">用户名</label>
                    <input type="text"  id="username" name="username" [value]="user.username" (input)="change('username')">
                    <div class="error-message" >
                        <p *ngIf="usernameEmpty">用户名不能为空</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" style="float: left;">密码</label>
                    <input type="password" id="password" [value]="user.password" (input)="change('password')">
                    <div class="error-message">
                        <p *ngIf="pasEmpty">密码不能为空</p>
                        <p *ngIf="short">密码不能少于6位</p>
                    </div>
                </div>

                <!-- Signup Confirm Password input -->
                <div *ngIf="authMode === 'Signup'" class="form-group">
                    <label for="confirmPassword" style="float: left;">确认密码</label>
                    <input type="password" id="confirmPassword" [value]="user.confirmPas" (input)="change('comformPas')">
                    <div class="error-message" >
                        <p *ngIf="confirmPassword">请确认密码</p>
                        <p *ngIf="same">两次密码不一致</p>
                    </div>
                </div>

                <div  class="form-group">
                    <label for="code" style="float: left;">验证码</label>
                    <br>
                    <div style="float: left;" >
                        <input type="code" id="code"
                            style="display: inline;float: left;" [value]="user.verifyCode" (input)="change('code')">
                        <canvas  (click)="refresh()" #verifyCanvas width="100" height="40"
                            style="cursor: pointer;display: inline;float: right;"></canvas>
                    </div>
                </div>
                <br>
                <br>
                <div class="error-message" *ngIf="code">
                    <p>验证码不正确</p>
                </div>

            </form>
            <!-- Submit button -->
            <button *ngIf="authMode === 'Login'" (click)="onSubmit()">登录</button>
            <button *ngIf="authMode === 'Signup'" (click)="onSubmit()">注册</button>

            <!-- Message for toggle from Login to Signup or vise versa -->
            <p *ngIf="authMode === 'Login'">没有账号？<a  (click)="onSwitchMode()">去注册</a></p>
            <p *ngIf="authMode === 'Signup'">有账号？<a (click)="onSwitchMode()">去登录</a></p>
        </div>
    </div>
</div>

<app-message *ngIf="message" [type]="type" [text]="text" ></app-message>

<iframe id="iframeId" src="http://localhost:2002/recept.html" scrolling="no"
    style="display: none;">
</iframe>